<template>
    <div class="article-list" ref="articleListRef">
        <!-- 文章列表 -->
        <van-pull-refresh
            v-model="isRefreshLoading"
            @refresh="onRefresh"
            :success-text="refreshSuccessText"
            :success-duration="1000"
        >
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <article-item
                    v-for="(item, index) in articlesList"
                    :key="index"
                    :article="item"
                ></article-item>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleItem from '@/components/article-item'
import { debounce } from 'lodash'

export default {
    data () {
        return {
            // 文章列表
            articlesList: [],
            // 控制加载的 loading 状态
            loading: false,
            // 控制加载结束的状态
            finished: false,
            // 获取下一页的时间戳
            timestamp: null,
            // 控制下拉刷新的状态
            isRefreshLoading: false,
            // 刷新成功的提示
            refreshSuccessText: '',
            // 页面滚动的距离
            scrollTop: 0
        }
    },
    components: {
        ArticleItem
    },
    props: {
        channels: {
            type: Object,
            required: true
        }
    },
    created () { },
    mounted () {
        // 获取页面滚动的距离
        const listDom = this.$refs.articleListRef
        listDom.onscroll = debounce(() => {
            this.scrollTop = listDom.scrollTop
        }, 50)
    },
    // 被 keep-alive 缓存的组件激活时调用
    activated () {
        this.$refs.articleListRef.scrollTop = this.scrollTop
    },
    methods: {
        // 获取文章列表
        async onLoad () {
            // 1. 请求获取数据
            const { data: res } = await getArticles({
                channel_id: this.channels.id,
                timestamp: this.timestamp || Date.now(),
                with_top: 1
            })

            // 2. 把数据放到 数组中
            // console.log(res);
            const { results } = res.data
            this.articlesList.push(...results)
            // console.log(this.articlesList);

            // 3. 设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
            this.loading = false

            // 4. 数据全部加载完成
            if (results.length) {
                // 更新时间戳获取下一页数据
                this.timestamp = res.data.pre_timestamp
            } else {
                this.finished = true
            }
        },
        // 下拉刷新
        async onRefresh () {
            // 1. 发起请求
            const { data: res } = await getArticles({
                channel_id: this.channels.id,
                timestamp: Date.now(),
                with_top: 1
            })

            // 2. 把数据追加到 数组中（往顶部追加）
            // console.log(res);
            const { results } = res.data
            this.articlesList.unshift(...results)

            // 3. 关闭刷新的状态
            this.isRefreshLoading = false
            this.refreshSuccessText = `更新了${results.length}条数据`
        }
    }
}
</script>

<style scoped>
.article-list {
    position: fixed;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 50px;
    overflow-y: auto;
}
</style>
